<template>
  <div id="cart">
    <x-header :left-options="{showBack: false}">购物车</x-header>
    <div class="cart_box" v-if='cartList.length'>
      <div v-for="(parent,index) in cartList" :key="index">
        <div class="cart_title">
          <div class="shop_name">
            <img src="assets/shop1.png" /> {{parent.name}}
            <span>></span>
          </div>
          <div class="edit" @click="edit()" v-if="parent.cartId == 1">编辑</div>
          <div class="complete" @click="complete()" v-if="parent.cartId == 1">完成</div>
        </div>
        <div class="cart_list">
          <ul>
            <li v-for="child in parent.list" :key="child.index">
              <label class='cartItem'>
                <div @click='checkOne(child)' v-if="checkedList.includes(child.id)">
                  <x-icon type="ios-checkmark" class="checker"></x-icon>
                </div>
                <div v-else @click='checkOne(child)'>
                  <x-icon type="ios-circle-outline" class="checker"></x-icon>
                </div>
                <div class="list_img"><img :src="child.src"></div>
                <div class="list_text">
                  <h3>{{child.title}}</h3>
                  <div class="line2">
                    <div class="color">{{child.color}}</div>
                    <div class="deleteBtn" v-show="del" @click="deleteItem(parent.id,child.id)">删除</div>
                  </div>
                  <div v-if="del" class="info">
                    <x-number :title="'¥'+child.price" v-model="child.num" width='30px' button-style='round' fillable :min='1' :max='99'></x-number>
                  </div>
                  <div v-else class="info">
                    <span class="price">¥{{child.price}}</span>
                    <span class="num">x{{child.num}}</span>
                  </div>
                </div>
              </label>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cartEmpty" v-else>
      <div>亲～暂时还没商品哦～</div>
    </div>
    <div class="settlement">
      <div style="width: 22%; margin-left: 5px;">
        <span @click="checkAllList" v-if='checkAll'>
          <x-icon type="ios-checkmark" class="checker"></x-icon>
        </span>
        <span @click="checkAllList" v-else>
          <x-icon type="ios-circle-outline" class="checker"></x-icon>
        </span>
        <span>全选</span>
      </div>
      <div class="total">
        <span>合计：</span>
        <span>￥{{countTotal}}</span>
        <em>不含运费</em>
      </div>
      <button class="jsBtn" @click="settlement">结算</button>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showTip" title="订单确认" @on-confirm="onConfirm">
        <p style="text-align:center;">确认提交订单吗？</p>
      </confirm>
      <confirm v-model="showDel" title="删除确认" @on-confirm="delConfirm">
        <p style="text-align:center;">确认删除此商品吗？</p>
      </confirm>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        {
          cartId: 1,
          name: "花都",
          list: [
            { id: 1, src: "assets/flower1.jpg", title: "白色多头康乃馨", color: "白色", price: "88", num: 1, selected: true },
            { id: 2, src: "assets/flower2.jpg", title: "粉色多头康乃馨", color: "粉色", price: "98", num: 2, selected: false }
          ]
        },
        {
          cartId: 2,
          name: "花之林",
          list: [
            { id: 3, src: "assets/flower1.jpg", title: "白色多头康乃馨", color: "白色", price: "88", num: 3, selected: false }
          ]
        }
      ],
      checkAll: false,      //是否全选
      checkedList: [],      //选中的商品 id
      totalMoney: 0,        //合计金额
      del: false,           //编辑状态
      showTip: false,       //确认订单提示显示
      showDel: false,       //删除商品提示显示
      deleteId: [],         //删除商品的id 数组长度2  第一位是商店id  第二位是商品id
    }
  },
  computed: {
    countTotal() {
      let total = 0;   //保存总金额
      //遍历已选择的商品id 将金额数量累加
      this.checkedList.forEach(id => {
        this.cartList.forEach(item => {
          item.list.forEach(obj => {
            if (id == obj.id) {
              total += (parseFloat(obj.num) * parseFloat(obj.price));
            }
          })
        })
      })
      // console.log(total);
      return total;
    }
  },
  methods: {
    //全选
    checkAllList() {
      this.checkAll = !this.checkAll;
      let list = [];  //全选商品id数组
      let total = 0;  //总金额
      //判断是否是全选
      if (this.checkAll) {
        //遍历累加数据
        this.cartList.forEach(item => {
          item.list.forEach(obj => {
            list.push(obj.id);
            total += (parseFloat(obj.price) * parseFloat(obj.num));
          })
        })
      }
      this.checkedList = list;
      // this.totalMoney = total;
    },
    //单选购物车商品
    checkOne(item) {
      // console.log(item);
      let list = this.checkedList;       //全部商品列表
      //先判断是否已经全选
      if (this.checkAll) {
        this.checkAll = false;
        //减除取消勾选的商品
        list = list.filter(key => key != item.id);
      } else {
        //没有全选 但是要判断勾选后的商品是否满足全选
        //判断是否已选
        if (list.includes(item.id)) {
          list = list.filter(key => key != item.id);
        } else {
          list.push(item.id);
        }
        let length = 0;   //总共商品数 遍历累加
        this.cartList.forEach(item => {
          length += item.list.length;
        });
        //判断是否已经满足全选
        if (list.length == length) {
          this.checkAll = true;
        }
      }
      this.checkedList = list;
    },
    //点击删除 key:删除商店的id  id:商店中list列表商品id
    deleteItem(key, id) {
      this.deleteId = [key, id];
      this.showDel = true;
    },
    //删除确定
    delConfirm() {
      this.cartList = this.cartList.filter(item => {
        if (item.id == this.deleteId[0]) {
          item.list = item.list.filter(obj => obj.id != this.deleteId[1]);
          if (item.list.length) {
            return item;
          }
        }
      })
    },
    changeSel(key) {
      console.log(key)
    },
    edit() {
      this.del = true;
    },
    complete() {
      this.del = false
    },
    settlement() {
      this.showTip = true
    },
    //确认提交订单
    onConfirm(msg) {
      console.log('on confirm');
      this.$router.push({ path: '/payment' })
    },
  },
}
</script>

<style lang="less">
#cart {
  .weui-cells {
    margin-top: 0;
    background: none;
  }
  .weui-cell {
    padding: 0;
    flex: 1;
    > div {
      color: #ffa534;
    }
  }
  .vux-number-round .vux-number-selector-sub,
  .vux-number-round .vux-number-selector-plus {
    border-color: #ffa534;
  }
  .vux-number-selector svg {
    fill: #ffa534;
  }
  .vux-cell-primary {
    margin-left: 60px;
  }
  .checker {
    vertical-align: middle;
    margin: 0 5px 4px 0;
    fill: #ffa534;
  }
  .cartEmpty {
    div {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translateX(-50%);
    }
  }
  // .counter{
  //   input{
  //     width: 30px;
  //     line-height: 24px;
  //     font-size: 16px;
  //     border:1px solid #aaa;
  //     text-align: center;
  //   }
  // }
  .cartItem {
    > div:first-child {
      line-height: 80px;
    }
  }
  .cart_box {
    padding: 10px 10px 100px 10px;
  }
  .cart_title {
    display: flex;
    img {
      width: 15px;
      height: 15px;
      margin: 5px 5px 0 5px;
    }
  }
  .shop_name {
    width: 70%;
    span {
      padding: 0 5px;
    }
  }
  .edit,
  .complete {
    width: 15%;
    text-align: right;
  }
  .cart_list {
    li {
      padding: 10px 0;
      border-bottom: 1px solid #c6c6c6;
      label {
        display: flex;
        align-items: center;
      }
    }
  }
  .list_img {
    margin-right: 10px;
    width: 80px;
    height: 80px;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .list_text {
    width: 67%;
    height: 80px;
    h3 {
      font-weight: normal;
      font-size: 16px;
    }
    .color {
      font-size: 12px;
      color: #c6c6c6;
      width: 80%;
    }
  }
  .line2 {
    display: flex;
    line-height: 24px;
    .deleteBtn {
      width: 20%;
      text-align: right;
      font-size: 14px;
    }
  }
  .info {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    line-height: 40px;
    .price {
      color: #ffa534;
      width: 80%;
    }
    .num {
      width: 20%;
      text-align: right;
    }
  }
  .settlement {
    position: fixed;
    bottom: 53px;
    left: 0;
    height: 40px;
    width: 100%;
    background: #fff;
    border-top: 1px solid #c6c6c6;
    display: flex;
    line-height: 40px;
    label {
      width: 16%;
      input {
        margin: 0 3px;
      }
    }
  }
  .total {
    width: 60%;
    text-align: right;
    font-size: 14px;
    span {
      color: #ffa534;
      font-size: 12px;
    }
    span:nth-child(2) {
      display: inline-block;
      width: 4em;
      margin: 0 6px;
    }
    em {
      font-style: normal;
      color: #c6c6c6;
      font-size: 12px;
      margin-right: 5px;
    }
  }
  .jsBtn {
    border: none;
    width: 20%;
    background: #ffa534;
    color: #fff;
    text-align: center;
  }
}
</style>
